<!-- 广场 - 课程 - 心得 - 新增/编辑心得 -->
<template>
  <z-navbar title="学习心得" />
  <view class="px-4 pb-25">
    <view class="mt-4 mb-2 c-#333 text-40 font-semibold">五个知识点</view>
    <view class="bg-#f6f6f6 rounded-lg px-4 py-4">
      <view v-for="(item, index) in state.knowledge_point" :key="index" class="py-2">
        <view class="flex pb-2">
          <view class="flex-shrink-0 pr-1.5 h-28 c-#333 text-28 leading-4">{{ index + 1 }}.</view>
          <textarea v-model="item.content" class="flex-1 c-#333 text-28 leading-4" placeholder="请填写知识点" auto-height />
        </view>
        <u-line v-if="index < state.knowledge_point.length - 1" />
      </view>
    </view>
    <view class="mt-4 mb-2 c-#333 text-40 font-semibold">三个感悟</view>
    <view class="bg-#f6f6f6 rounded-lg px-4 py-4">
      <view v-for="(item, index) in state.apperception" :key="index" class="py-2">
        <view class="flex pb-2">
          <view class="flex-shrink-0 pr-1.5 h-28 c-#333 text-28 leading-4">{{ index + 1 }}.</view>
          <textarea v-model="item.content" class="flex-1 c-#333 text-28 leading-4" placeholder="请填写感悟" auto-height />
        </view>
        <u-line v-if="index < state.apperception.length - 1" />
      </view>
    </view>
    <view class="mt-4 mb-2 c-#333 text-40 font-semibold">一个执行点</view>
    <view class="bg-#f6f6f6 rounded-lg px-4 py-4">
      <view class="flex py-2">
        <view class="flex-shrink-0 pr-1.5 h-28 c-#333 text-28 leading-4">1.</view>
        <textarea v-model="state.execution_point" class="flex-1 c-#333 text-28 leading-4" placeholder="请填写执行点" auto-height />
      </view>
    </view>
  </view>
  <view class="bottom-wrap-16 w-full bg-#fff border-top px-4" @click="onSubmit">
    <view class="button-save">保存</view>
  </view>
</template>
<script setup>
import { showToast } from '@/common/util/uni'
import { postOnlineCourseStudyNoteAdd } from '@/common/http/module/square'

const emit = defineEmits(['confirm'])

const props = defineProps({
  data: Object,
  classId: String
})

const state = reactive({
  knowledge_point: [
    { content: '' },
    { content: '' },
    { content: '' },
    { content: '' },
    { content: '' },
  ],
  apperception: [
    { content: '' },
    { content: '' },
    { content: '' },
  ],
  execution_point: ''
})

watch(() => props.data, (val) => {
  initFormData()
})

function initFormData() {
  if (!props.data) return
  state.knowledge_point = !props.data.knowledge_point || props.data.knowledge_point.length == 0 ? [{ content: '' }, { content: '' }, { content: '' }, { content: '' }, { content: '' }] : props.data.knowledge_point
  state.apperception = !props.data.apperception || props.data.apperception.length == 0 ? [{ content: '' }, { content: '' }, { content: '' }] : props.data.apperception
  state.execution_point = props.data?.execution_point ?? ''
}

function onSubmit() {
  const params = {
    ...state,
    class_id: props.classId,
  }
  if (props.data?.id) {
    params.id = props.data.id
  }
  postOnlineCourseStudyNoteAdd(params).then(() => {
    showToast('保存成功')
    emit('confirm')
  })
}

onMounted(() => initFormData())
</script>

<style lang="scss" scoped>
.button-save {
  width: 100%;
  height: 68rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  background-color: #F4AF22;
  color: #fff;
  font-size: 28rpx;
}

.border-top {
  border-top: 2rpx solid #eee;
}
</style>
